<template>
  <header class="bg-white/90 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50 safe-area-top dark:bg-[#141414]/90">
    <div class="px-4">
      <!-- 移动端布局 -->
      <div class="flex items-center justify-between h-14 md:h-16">
        <!-- Logo -->
        <div class="w-8 h-8 md:w-10 md:h-10 rounded-lg flex items-center justify-center overflow-hidden flex-shrink-0">
          <img :src="logoUrl" alt="BandHot" class="w-full h-full object-contain" />
        </div>
        
        <!-- 路由导航 - 移动端优化 -->
        <nav class="flex items-center space-x-1 flex-1 justify-center max-w-md mx-4">
          <router-link
            v-for="route in navRoutes"
            :key="route.name"
            :to="route.path"
            replace
            class="nav-link"
            :class="{ 'nav-link-active': isActiveRoute(route.name) }"
          >
            <component :is="route.icon" class="w-4 h-4 flex-shrink-0" />
            <span class="text-xs md:text-sm whitespace-nowrap">{{ t(route.meta.titleKey) }}</span>
          </router-link>
        </nav>
        
        <!-- 状态指示器 - 移动端简化 -->
        <div class="flex items-center space-x-2 flex-shrink-0">
          <div class="flex items-center space-x-1">
            <div :class="statusIndicatorClass" />
            <span class="text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
              {{ statusText }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { Settings, Home, Activity, BarChart3 } from 'lucide-vue-next'
import { useBandwidthStore } from '@/stores/bandwidth'
import { useSettingsStore } from '@/stores/settings'
import { useI18n } from '@/composables/useI18n'

const route = useRoute()
const bandwidthStore = useBandwidthStore()
const settingsStore = useSettingsStore()
const { t } = useI18n()

// 导航路由配置
const navRoutes = [
  {
    name: 'home',
    path: '/',
    icon: Home,
    meta: { titleKey: 'nav.home' }
  },
  {
    name: 'stats',
    path: '/stats',
    icon: BarChart3,
    meta: { titleKey: 'nav.stats' }
  },
  {
    name: 'monitor',
    path: '/monitor',
    icon: Activity,
    meta: { titleKey: 'nav.monitor' }
  },
  {
    name: 'settings',
    path: '/settings',
    icon: Settings,
    meta: { titleKey: 'nav.settings' }
  }
]

// 判断是否为当前激活路由
const isActiveRoute = (routeName: string) => {
  return route.name === routeName
}

const statusIndicatorClass = computed(() => {
  const baseClass = 'status-indicator'
  if (bandwidthStore.isRunning) {
    return `${baseClass} bg-green-500`
  }
  return `${baseClass} bg-gray-400`
})

const statusText = computed(() => {
  if (bandwidthStore.isRunning) {
    return t('components.header.running')
  }
  return t('components.header.stopped')
})

// 根据主题动态切换logo
const logoUrl = computed(() => {
  return settingsStore.isDarkMode ? '/icons/32x32-dark.svg' : '/icons/32x32.svg'
})
</script>

<style scoped>
/* 安全区域适配 */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

/* 导航链接样式 */
.nav-link {
  @apply flex items-center space-x-1.5 px-3 py-1.5 md:px-4 md:py-2 rounded-lg text-xs md:text-sm font-medium text-gray-600 dark:text-gray-400 transition-colors;
}

/* 亮色模式悬浮样式 */
.nav-link:hover {
  @apply text-blue-700 bg-blue-50;
}

/* 暗黑模式悬浮样式 */
.dark .nav-link:hover {
  @apply text-orange-300 bg-orange-900/20;
}

/* 亮色模式激活样式 */
.nav-link-active {
  @apply text-blue-600 bg-blue-100 font-semibold;
}

/* 亮色模式激活悬浮样式 */
.nav-link-active:hover {
  @apply text-blue-700 bg-blue-200;
}

/* 暗黑模式激活样式 */
.dark .nav-link-active {
  @apply text-orange-400 bg-orange-900/30 font-semibold;
}

/* 暗黑模式激活悬浮样式 */
.dark .nav-link-active:hover {
  @apply text-orange-300 bg-orange-900/50;
}

/* 状态指示器 */
.status-indicator {
  @apply w-2 h-2 md:w-2.5 md:h-2.5 rounded-full flex-shrink-0;
  animation: pulse 2s infinite;
}

/* 状态指示器动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 移动端响应式优化 */
@media (max-width: 640px) {
  .nav-link span {
    display: none;
  }
  
  .nav-link {
    @apply px-2 py-2;
    min-width: 2.5rem;
    justify-content: center;
  }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
  .nav-link {
    @apply px-1.5 py-1.5;
    min-width: 2rem;
  }
}
</style> 